<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tabbarWrap{
            width: 100%;
            height: 64px;
            border-top: 1px solid #999;
            position: fixed;
            left: 0;
            bottom: 0;
        }
        .itemMrap{
            width: 20%;
            float: left;
            text-align: center;
        }
        .itemMrap image{
            width: 45px;
        }
        .itemMrap span{
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <tabber></tabber>
</div>
<template id="parent">
    <div class="tabbarWrap">
        <item src="#" txt="首页"></item>
        <item src="#" txt="搜索"></item>
        <item src="#" txt="热点"></item>
        <item src="#" txt="购物车"></item>
        <item src="#" txt="我的"></item>
    </div>
</template>
<!--子组件末班-->
<template id="son">
    <div class="itemMrap">
        <img : src="src">
        <br>
        <span>{{txt}}</span>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el : '#app',
        data: {

        },
        components:{
            "tabber":{
                template:'#parent',
                //子组件
                components:{
                    "item": {
                        template: '#son',
                        props: ["txt","src"]
                    }
                }
            }
        }
    });
</script>
</body>
</html>